<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <title>互联网+农业开发</title>
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="w top_box">
            <div class="l">让旅行随心所欲</div>
            <div class="r">
                <a href="#">您好,请登录</a>
                <a href="#">免费注册</a>
                <a href="#">加入收藏</a>
                <a href="#">手机版</a>
                <a href="#">客服中心</a>
            </div>
        </div>
    </div>

    <!-- 头部搜索 -->
    <div class="head">
        <div class="w head_box">
            <div class="logo_l"></div>
            <div class="search">
                <input type="text" id="sInput" placeholder="搜索旅行目的地/景点门票/酒店/旅游/交通">
                <button class="btn">搜索</button>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav">
        <div class="w nav_box">
            <ul>
                <li><a class="e_nav" href="#">首页</a></li>
                <li><a class="e_nav" href="#">怒江游</a></li>
                <li><a class="e_nav" href="#">出境游</a></li>
                <li><a class="e_nav" href="#">国内游</a></li>
                <li><a class="e_nav" href="#">周边游</a></li>
                <li><a class="e_nav" href="#">景点门票</a></li>
                <li><a class="e_nav" href="#">酒店</a></li>
                <li><a class="e_nav" href="#">定制游</a></li>
                <li><a class="e_nav" href="#">自驾游</a></li>
                <li><a class="e_nav" href="#">亲子游</a></li>
                <li><a class="e_nav" href="#">特卖会</a></li>
                <li><a class="e_nav" href="#">旅游攻略</a></li>
            </ul>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="carousel">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./imgs/banner-1.png" alt="轮播图">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./imgs/banner-1.png" alt="轮播图">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./imgs/banner-1.png" alt="轮播图">
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- 分类搜索 -->
    <div class="ClassiSearch">
        <div class="w ClassiSearch_box">
            <div class="ClassiSearch_left">
                <a class="cur" href="#">景点门票</a>
                <a href="#">跟团游</a>
                <a href="#">自由行</a>
                <a href="#">当地游</a>
                <a href="#">酒店</a>
                <a href="#">民宿</a>
                <a href="#">机票</a>
                <a href="#">火车票</a>
            </div>
            <div class="ClassiSearch_top">
                <span class="cur">景点门票</span>
                <span>酒店+景点</span>
                <span>民宿+景点</span>
                <span>火车+酒店+景点</span>
                <span>火车+民宿+景点</span>
                <span>机票+酒店+景点</span>
                <span>机票+民宿+景点</span>
            </div>
            <div class="ClassiSearch_center">
                <div class="ClassiSearch_input">
                    <input type="text" id="classInput" placeholder="请输入目的地、主题或景区名">
                </div>
                <div class="btn">
                    <button>搜索</button>
                </div>
                <div class="Searchhistory">
                    <span>拉萨+林芝+日喀则</span>
                    <span>羊卓雍措</span>
                    <span>岗巴拉山口</span>
                    <span>拉萨+林芝</span>
                    <span>珠峰大本营</span>
                    <span>拉萨+日喀则</span>
                    <span>桑耶寺</span>
                    <span>拉姆拉错</span>
                    <span>雍布拉康</span>
                    <span>昌珠寺</span>
                    <span>拉萨</span>
                    <span>河沼泽湿地</span>
                    <span>雅鲁藏布江</span>
                    <span>达古景区</span>
                    <span>思金拉措</span>
                    <span>拉姆拉措</span>
                    <span>40号冰川</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 山南景点 -->
    <div class="foodImg">
        <div class="w foodImg_box">
            <div class="heard">
                <span class="title">山南景点</span>
                <div class="every_title">
                    <a href="#">羊卓雍措</a>
                    <a href="#">雅鲁藏布江水葬台</a>
                    <a href="#">贡嘎曲德寺</a>
                    <a href="#">加若拉山口</a>
                </div>
                <a href="#" class="more">
                    <span>更多</span>
                    <span></span>
                </a>
            </div>
            <div class="alllocale">
                <div class="alllocale_l">
                    <div class="alllocale_l_top">
                        <div class="hot">热门线路玩法</div>
                        <a href="#">拉萨+日喀则</a>
                        <a href="#">川藏线</a>
                        <a href="#">川青藏环线</a>
                        <a href="#">拉萨+林芝+日喀则+山南</a>
                        <a href="#">青藏线</a>
                        <a href="#">日喀则一地</a>
                    </div>
                    <div class="alllocale_l_bottom">
                        <img src="./imgs/news1.png" />
                    </div>
                </div>
                <div class="alllocale_r">
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/locale1.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/locale2.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/locale3.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/locale4.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/locale5.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/locale6.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 酒店/旅行社 -->
    <div class="foodImg">
        <div class="w foodImg_box">
            <div class="heard">
                <span class="title">酒店/旅行社</span>
                <div class="every_title">
                    <a href="#">星际酒店</a>
                    <a href="#">国家级旅行社</a>
                    <a href="#">普通酒店</a>
                    <a href="#">省市级旅行社</a>
                </div>
                <a href="#" class="more">
                    <span>更多</span>
                    <span></span>
                </a>
            </div>
            <div class="alllocale">
                <div class="alllocale_r">
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/hotel1.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/hotel2.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/hotel3.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/hotel4.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/hotel5.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                    <div class="every_Locale">
                        <div class="locale_t">
                            <img src="./imgs/hotel6.png" />
                        </div>
                        <a href="#" class="locale_c">
                            <span>【跟团游】</span>拉萨+林芝+山南++林芝+山南+布达拉宫+芝+山南+布达拉宫+芝+山南+布达拉宫+南+布达拉宫+羊卓雍措+大峡谷8日7晚山南全景不走回头路，4晚洲...
                        </a>
                        <div class="locale_b">
                            <span> ¥ <b> 12400 </b>起/份</span>
                            <span>4.9好评率</span>
                        </div>
                    </div>
                </div>
                <div class="alllocale_l">
                    <div class="alllocale_l_top">
                        <div class="hot">酒店集团</div>
                        <a href="#">开元</a>
                        <a href="#">花间堂</a>
                        <a href="#">万达</a>
                        <a href="#">恒大</a>
                        <a href="#">希尔顿</a>
                        <a href="#">温德姆</a>
                        <a href="#">喜来登</a>
                        <a href="#">悦榕庄</a>
                        <a href="#">君澜</a>
                        <a href="#">碧桂园</a>
                    </div>
                    <div class="alllocale_l_bottom">
                        <img src="./imgs/news2.png">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 山南见闻 -->
    <div class="headlines" id="headlines">
        <div class="headlines_box w">
            <div class="heard">
                <span class="title">山南见闻</span>
                <div class="every_title">
                    <a href="#">新闻资讯</a>
                    <a href="#">人文文化</a>
                    <a href="#">旅游记录</a>
                </div>
                <a href="#" class="more">
                    <span>更多</span>
                    <span></span>
                </a>
            </div>

            <div class="headlines_t">
                <img src="./imgs/leadNews.png" />
                <a href="#">第三届京津冀餐饮饭店业发展论坛顺利召开</a>
                <div class="text">
                    由北京市M的第十届家餐厨酒店用品MALL等单位联合届家餐厨酒店用品MALL等单位联合届家餐厨酒店用品MALL等单位联合届家餐厨酒店用品MALL等单位联合届家餐厨酒店用品MALL等单位联合主办的第十届家餐厨酒店用品MALL等单位联合主办的第十届家餐厨酒店用品MALL等单位联合主办的第十届北京国际酒店用品及餐饮业博览会在中国
                </div>
            </div>

            <div class="headlines_b">
                <div class="headlines_swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <span>众星云集耀动全场 玉露琼浆醉舞京城 ——赫侬酒庄产品发布会在京圆满落幕</span>
                            <a href="#">
                                <img src="./imgs/headlines.png" alt="轮播图">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <span>众星云集耀动全场 玉露琼浆醉舞京城 ——赫侬酒庄产品发布会在京圆满落幕</span>
                            <a href="#">
                                <img src="./imgs/headlines.png" alt="轮播图">
                            </a>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-scrollbar"></div>
                </div>

                <div class="news">
                    <div class="everyNews">
                        <a href="#">
                            自治区副主席石谋军到我市调研学校教育工作
                        </a>
                        <span>
                            自治区副主席石谋军一行到我市桑副主席石谋军一行到我市桑副主席石谋军一行到我市桑副主席石谋军一行到我市桑副主席石谋军一行到我市桑副主席石谋军一行到我市桑日、扎囊等地调研学校教育工作情况。市委副书记吴巨培、副市长王霞陪同调研
                            石谋军一行先后来到桑日县绒乡完小、县幼儿园，市三小，扎囊县阿扎完小、吉汝...
                        </span>
                    </div>
                    <div class="everyNews">
                        <a href="#">
                            自治区副主席石谋军到我市调研学校教育工作
                        </a>
                        <span>
                            自治区副主席石谋军一行到我市桑日、扎囊等地调研学校教育工作情况。市委副书记吴巨培、副市长王霞陪同调研
                            石谋军一行先后来到桑日县绒乡完小、县幼儿园席石谋军一行到我市桑日、扎囊等地调研学校教育工作情况。市委副书记吴巨培、副市长王霞陪同调研
                            石谋军一行先后来到桑日县绒乡完小、县幼儿园，市三小，扎囊县阿扎完小、吉汝...
                        </span>
                    </div>
                    <div class="everyNews">
                        <a href="#">
                            自治区副主席石谋军到我市调研学校教育工作
                        </a>
                        <span>
                            自治区副主席石谋军一行到我市桑日、扎囊等地调研学校教育工作情况。市委副书记吴巨培、副市长王霞陪同调研
                            石谋军一行先后来到桑日县绒乡完小、县幼儿园，市三小，扎囊县阿扎完小、吉汝...
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部新闻 -->
    <div class="newsList">
        <div class="newsList_box">
            <div class="news every" style="display: block;">
                <div class="title">旅游资讯</div>
                <ul>
                    <li><span></span><a href="#">上海长宁区设立全市首个餐饮！</a></li>
                    <li><span></span><a href="#">传统玩家危险了！这个品类正</a></li>
                    <li><span></span><a href="#">中国餐饮产业收入超4万亿元</a></li>
                    <li><span></span><a href="#">餐饮人眼中的重回“深耕”</a></li>
                    <li><span></span><a href="#">当心！一饭店墙上收款二维码</a></li>
                    <li><span></span><a href="#">广州查处220宗餐饮业污染</a></li>
                    <li><span></span><a href="#">山西禁止火锅店用燃气加热</a></li>
                    <li><span></span><a href="#">2019年中国餐饮行业发展</a></li>
                    <li><span></span><a href="#">秀屿区治理餐饮业油烟污染</a></li>
                    <li><span></span><a href="#">打造国内特色小吃新高地！</a></li>
                </ul>
            </div>
            <div class="trends every">
                <div class="title">山南经济</div>
                <ul>
                    <li><span></span><a href="#">美团快驴进货为餐饮商户数字</a></li>
                    <li><span></span><a href="#">肯德基开始卖串串</a></li>
                    <li><span></span><a href="#">股东内讧，亏损2.32亿</a></li>
                    <li><span></span><a href="#">餐饮供应链领军企业信良记再</a></li>
                    <li><span></span><a href="#">呷哺呷哺走饮食健康轻体风潮</a></li>
                    <li><span></span><a href="#">北京疯味餐饮集团：在餐饮市场爆红</a></li>
                    <li><span></span><a href="#">广州酒家拟收购陶陶居</a></li>
                    <li><span></span><a href="#">瑞幸咖啡推出小鹿茶，进军茶饮市场</a></li>
                    <li><span></span><a href="#">肯德基中国推出首款素汉堡</a></li>
                    <li><span></span><a href="#">获北京餐饮“奥斯卡”三项大奖</a></li>
                </ul>
            </div>
            <div class="express every">
                <div class="title">社会民生</div>
                <ul>
                    <li><span></span><a href="#">吃货大陆EAT举办餐饮社群流量研讨论坛</a></li>
                    <li><span></span><a href="#">第四届北京国际酒店用品及餐饮博览会</a></li>
                    <li><span></span><a href="#">餐饮业质量安全提升工程推进会在京举行</a></li>
                    <li><span></span><a href="#">餐饮老字号齐聚南京 共商传承创新发展之道</a></li>
                    <li><span></span><a href="#">互联网+智慧餐饮管理正迈向</a></li>
                    <li><span></span><a href="#">以美食为纽带 促文化大交流</a></li>
                    <li><span></span><a href="#">助推酒店餐饮业发展2019将于7月举行</a></li>
                    <li><span></span><a href="#">品牌的力量味道中国</a></li>
                    <li><span></span><a href="#">上海餐饮连锁加盟展将在8月28日盛大开幕</a></li>
                    <li><span></span><a href="#">中饭协发布《2019中国餐饮业年度报告》</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 网页底部 -->
    <div class="bottom">
        <div class="bottom_Info">
            <div class="text_t">
                <a href="#">网站首页</a>
                <span></span>
                <a href="#">关于我们</a>
                <span></span>
                <a href="#">联系我们</a>
                <span></span>
                <a href="#">常见问题</a>
                <span></span>
                <a href="#">广告服务</a>
            </div>
            <div class="text_b">版权所有 © 互联网+山南旅游网 版权所有</div>
        </div>
    </div>

</body>

</html>

<script>


    // 分类搜索
    let index = 0;
    $('.ClassiSearch_top span').click(function () {
        index = $(this).index();

        $('.ClassiSearch_top span').each(function () {
            $(this).removeClass('cur')
        })
        $('.ClassiSearch_top span:eq(' + index + ')').addClass('cur')

    })

    $('.ClassiSearch_center button').click(function () {


        let value = document.getElementById('classInput').value;

        console.log(value + index);

    })

    // 顶部搜索
    $('.head_box .btn').click(function () {

        let value = document.getElementById('sInput').value;

        console.log(value);
    }),

        // 大轮播图
        new Swiper('.swiper-container', {
            autoplay: false, //可选选项，自动滑动
            direction: 'horizontal', //滑动方向
            loop: true, //循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                type: 'custom',
                autoplayDisableOnInteraction: false,
                renderCustom: function (swiper, current, total) {
                    var paginationHtml = " ";
                    for (var i = 0; i < total; i++) {
                        // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                        if (i === (current - 1)) {
                            paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                        } else {
                            paginationHtml += '<span class="swiper-pagination-customs"></span>';
                        }
                    }
                    return paginationHtml;
                },
            }
        })

    // 下部轮播图
    new Swiper('.headlines_swiper', {
        autoplay: true, //可选选项，自动滑动
        direction: 'horizontal', //滑动方向
        loop: true, //循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-scrollbar',
            type: 'custom',
            autoplayDisableOnInteraction: false,
            renderCustom: function (swiper, current, total) {
                var paginationHtml = " ";
                for (var i = 0; i < total; i++) {
                    // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                    if (i === (current - 1)) {
                        paginationHtml += '<span class="swiper-scrollbar-customs swiper-scrollbar-customs-active"></span>';
                    } else {
                        paginationHtml += '<span class="swiper-scrollbar-customs"></span>';
                    }
                }
                return paginationHtml;
            },
        }
    })

</script>